<template>
  <div>
    <!-- <input v-model="num" type="text"> -->

    <!-- 深度监听 -->
    <p>
        姓名：<input v-model="obj.name" type="text"/>
    </p>
    <p>
        年龄：<input v-model="obj.age" type="text"/>
    </p>
    <p>
        性别：<input v-model="obj.sex" type="text"/>
    </p>

    <div>
        <h4>搜索结果</h4>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{  item.name }} -- {{ item.age }} --
                <span v-if="item.sex === '0'">
                    男
                </span>
                <span v-else>
                    女
                </span>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    name: "watch-com",
    data() {
        return {
            num: "",
            obj: {
                name: "",
                age: "",
                sex: ""
            },
            list: [
                {
                    name: "张三",
                    age: '20',
                    sex: '1'
                },
                {
                    name: "张三",
                    age: '20',
                    sex: '0'
                },
                {
                    name: "张三",
                    age: '30',
                    sex: '0'
                },
                {
                    name: "李四",
                    age: '20',
                    sex: '1'
                },
            ]
        }
    },
    watch: {
        // watch  监听的是this上面的内容
        // num(newValue, oldValue) {
        //     if (newValue.length > 11) {
        //         console.log('已经11位了')
        //         this.num = oldValue
        //     }
        // }
        // obj() {
        //     console.log('对象改变了')
        // }

        obj: {
            // 开启深度监听
            deep: true,
            // 默认是false  如果设置为true, 会自动执行handler
            // immediate: true,
            handler(newValue) {
                console.log('handler执行了')
                const arr = this.list.filter(item => {
                    return item.name.includes(newValue.name)
                })

                const arr2 = arr.filter(item => {
                    // includes  是数组和字符串下的方法
                    return item.age.includes(newValue.age)
                })

                const arr3 = arr2.filter(item => {
                    // includes  是数组和字符串下的方法
                    return item.sex.includes(newValue.sex)
                })

                this.list = arr3
            }
        }
    }
}
</script>

<style>

</style>